<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	.box{
		width: 300px;
		margin: 100px auto 0;
	}
	table{
		/*为表格设置合并边框模型*/
		border-collapse: collapse;
		border-spacing: 0;
		border: 1px solid #c0c0c0;
		width: 300px;
	}
	th,td{
		border: 1px solid tan;
		color: orange;
		padding: 10px;
	}
	th{
		background-color: skyblue;
		font: bold 16px "微软雅黑";
		color: white;
	}
	td{
		font: 14px "微软雅黑";
	}
	tbody tr{
		background-color: block;
	}
	tbody tr:hover{
		cursor: pointer;
		background-color: #fafafa;
	}
	</style>
</head>
<body>
	<div class="box">
	<table>
		<thead>
			<tr>
				<th>
				<input type="checkbox" id="title">
				</th>
				<th>商品</th>
				<th>价格</th>
			</tr>
		</thead>
		<tbody id="content">
			<tr>
				<td>
				<input type="checkbox">
				</td>
				<td>iphone8</td>
				<td>8888</td>
			</tr>
			<tr>
				<td>
				<input type="checkbox">
				</td>
				<td>iphone8</td>
				<td>8888</td>
			</tr>
			<tr>
				<td>
				<input type="checkbox">
				</td>
				<td>iphone8</td>
				<td>8888</td>
			</tr>
			<tr>
				<td>
				<input type="checkbox">
				</td>
				<td>iphone8</td>
				<td>8888</td>
			</tr>
		</tbody>
	</table>
	<input type="button" value="反选" id="btn">
	</div>
	<script>
	var content = document.getElementById('content')
	var inputs = content.getElementsByTagName('input')
     //获取父checkbox，注册点击事件
     var title = document.getElementById('title');
	title.onclick = function(){
	
		// 找到所有子的checkbox，让这些checkbox的状态跟父checkbox保持一致
		for(var i = 0; i < inputs.length;i++){
			var input = inputs[i]
			if(input.type === 'checkbox'){
				//父子选中状态保持一致
				input.checked = this.checked;
			}
		}
	}
	//遍历所有子的checkbox，注册点击事件
	for(var i = 0; i < inputs.length; i++){
		var input = inputs[i];
		  // 判断是否是checkbox
		if(input.type !== 'checkbox'){
			continue;
		}
		 // 给子checkbox注册点击事件
		 input.onclick = function(){
		 	//   // 假设所有的子的checkbox都被选中了
		 	// var checkAll = true;
		 	//    // 判断是否所有的子的checkbox都被选中了
		 	// for(var i = 0; i < inputs.length; i++){
		 	// 	var input = inputs[i]
		 	// 	if(input.type !== 'checkbox'){
		 	// 		continue;
		 	// 	}
		 	// 	//判断当前所有checkbox是否被选中
		 	// 	if(!input.checked){
		 	// 		checkAll = false;
		 	// 	} 
		 	// }
		 	// //设置父checkbox状态
		 	// title.checked = checkAll;
		 	checkboxAll();
		 }
	}
	//判断父checkbox状态 封装成函数
	function checkboxAll(){
		 	  // 假设所有的子的checkbox都被选中了
		 	var checkAll = true;
		 	   // 判断是否所有的子的checkbox都被选中了
		 	for(var i = 0; i < inputs.length; i++){
		 		var input = inputs[i]
		 		if(input.type !== 'checkbox'){
		 			continue;
		 		}
		 		//判断当前所有checkbox是否被选中
		 		if(!input.checked){
		 			checkAll = false;
		 		} 
		 	}
		 	//设置父checkbox状态
		 	title.checked = checkAll;
	}
	
	var btn = document.getElementById('btn')
	btn.onclick = function(){
		//找到所有子checkbox,反选
		for(var i = 0; i < inputs.length; i++){
			var input = inputs[i];
			if(input.type !== 'checkbox'){
				continue;
			}
			input.checked = !input.checked;
			//设置父checkbox状态
				checkboxAll();
		}
	}
	</script>
</body>
</html>